<template>
  <section style="padding: 5px">
    <el-row>
      <el-col :span="6">
        <el-select v-model="selType" size="mini" placeholder="选择广告内容">
          <el-option v-for="type in types" :key="type.code" :value="type.code" :label="type.name"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6" style="float: right">
        <el-input size="mini" v-model="searchKey" style="width: 80%" placeholder="输入关键字筛选" @keydown.native.prevent.enter="searchBtn(selType)"></el-input>
        <i class="el-icon-search"  @click="searchBtn(selType)"></i>
      </el-col>
    </el-row>
    <el-row v-if="list" style="margin-top:10px">
      <el-table :data="list" height="400">
        <el-table-column type="index" label="序号"/>
        <el-table-column label="名称">
          <template slot-scope="scope">
            {{scope.row.title?scope.row.title:scope.row.name}}
          </template>
        </el-table-column>
        <el-table-column label="设置" v-if="selType === 'page'">
          <template slot-scope="scope">
            <page-keys :pageKey="scope.row" v-on:change="changeEvent"></page-keys>
          </template>
        </el-table-column>
        <el-table-column label="操作" v-else>
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="checkAd(scope.row,selType)">check</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-show="totalPage>0" style="margin-top:20px;"
                     layout="prev, pager, next" :page-count="totalPage" @current-change="goPage($event,selType)"/>
    </el-row>
    <el-button size="mini" type="primary" @click="saveBtn">确定</el-button>
  </section>
</template>

<script>
  import pageKeys from '../appAd/pageKeys'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "setDetail",
    components:{pageKeys},
    props:['item'],
    data(){
      return {
        searchKey:null,
        selType:null,
        types:[
          {name:'商品',code:'goods'},
          {name:'活动',code:'activity'},
          {name:'商品搜索页面',code:'page'},
          {name:'商店',code:'store'},
        ],
        list:null,
        totalPage:0
      }
    },
    watch:{
      selType(nv,ov){
        if(nv){
          console.log(this.item)
          this.totalPage=0
          this.item.data.type=nv
          this.getModel(nv)
        }
      }
    },
    created(){
      console.log(this.item)
      if(this.item.url === undefined){
        Vue.set(this.item,'url','')
      }
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      searchBtn(code){
        if(code === 'goods'){
          this.getGoodsList()
        }else if(code === 'activity'){
          this.getActivities()
        }else if(code === 'page'){

        }
      },
      goPage(val,code){
        if(code === 'goods'){
          this.getGoodsList(val-1)
        }else if(code === 'activity'){
          this.getActivities(val-1)
        }
      },
      getModel(code){
        console.log('看看要加载哪个控件——————————',code)
        if(code === 'goods'){
          this.getGoodsList()
        }else if(code === 'activity'){
          this.getActivities()
        }else if(code === 'page'){
          this.item.url = '/pages/mall/mallGoods/mallGoods'
          this.list=[]
          this.getList()
        }else if(code === 'store'){
          this.getStoreList()
        }
      },
      getList(){
        let keyList=[
          {key:'goodsTypeId',name:'商品类型',val:null},
          {key:'goodsTypeCode',name:'商品类型编码',val:null},
          {key:'departmentId',name:'部门',val:null},
          {key:'departmentCode',name:'部门编码',val:null},
          {key:'key',name:'关键字',val:null}
        ]
        this.list=this.list.concat(keyList)
        console.log(this.list)
      },
      getGoodsList(pageNo){
        this.fetch({name:"getMallGoodsList",data:{page:pageNo?pageNo:0,key:this.searchKey}})
          .then(res=>{
            console.log(res)
            this.list=res.content
            this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getStoreList(){
        this.fetch({name:"getStoreList"})
          .then(res=>{
            console.log(res)
            this.list=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getActivities(){
        this.fetch({name:"getActivityShareList",data:{memberId:2,openGId:'empty'}})
          .then(res=>{
            console.log(res)
            res.content.forEach(r=>{
              this.setName(r)
            })
            this.list=res.content
            this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      setName(row){
        this.fetch({name:"getActivity",data:{id:row.activityId?row.activityId:row.id}})
          .then(res=>{
            console.log(res)
            Vue.set(row,'title',res.title)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      checkAd(row,code){
        console.log(row)
        console.log(this.item)
        let url
        if(code === 'goods'){
          url='/pages/mall/mallGoodsDetail/mallGoodsDetail?mallGoodsId='+row.id
        }else if(code === 'activity'){
          url = '/pages/activity/index?actid=' + row.activityId + '&from=2'
        }else if(code === 'page'){
          this.makeVal(row)
          if(this.item.url === '/pages/mall/mallGoods/mallGoods'){
            url = this.item.url+'?'+row.key+'='+row.val
          }else {
            url = this.item.url+'&'+row.key+'='+row.val
          }
        }else if(code ==='store'){
          url = '/pages/mall/store/store?storeId=' + row.departmentId
        }
        this.item.url=url
      },
      makeVal(row){
        console.log(row)
        console.log(this.list)
      },
      saveBtn(){
        console.log(this.item)
        this.$emit('save',this.item)
      },
      changeEvent(e){
        console.log('查看联动————————',e,this.item)
        console.log(this.list)
        let url='/pages/mall/mallGoods/mallGoods'
        let options=''
        this.list.forEach(l=>{
          if(l.val){
            console.log(l.val)
            options= options+'&'+ l.key+'='+l.val
          }
        })
        // if(options.length>0){
        options = options.replace("&","?")
        // }
        console.log('看看参数————',options)
        this.item.url=url+options

      }
    }
  }
</script>

<style scoped>

</style>
